<template>
  <view class="container">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="iconfont icon-back" @tap="goBack">←</text>
      <text class="title">订单详情</text>
    </view>

    <!-- 订单状态 -->
    <view class="status-card">
      <view class="status-header">
        <text class="status-text" :class="getStatusClass(order.status)">{{ order.status }}</text>
      </view>
      <view class="status-info">
        <text class="status-desc">{{ getStatusDesc(order.status) }}</text>
      </view>
    </view>

    <!-- 订单信息 -->
    <view class="info-card">
      <view class="card-title">订单信息</view>
      <view class="info-item">
        <text class="info-label">订单编号</text>
        <text class="info-value">{{ order.id }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">创建时间</text>
        <text class="info-value">{{ order.createTime || '2023-11-25 08:30' }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">预约时间</text>
        <text class="info-value">{{ order.bookingTime }}</text>
      </view>
      <view class="info-item">
        <text class="info-label">支付方式</text>
        <text class="info-value">微信支付</text>
      </view>
      <view class="info-item">
        <text class="info-label">实付金额</text>
        <text class="info-value price">¥{{ order.price }}</text>
      </view>
    </view>

    <!-- 摄影师信息 -->
    <view class="info-card">
      <view class="card-title">摄影师信息</view>
      <view class="photographer-info">
        <image :src="order.avatar" class="photographer-avatar"></image>
        <view class="photographer-detail">
          <text class="photographer-name">{{ order.photographerName }}</text>
          <text class="photographer-contact">联系电话: {{ order.photographerPhone }}</text>
        </view>
      </view>
    </view>

    <!-- 套餐信息 -->
    <view class="info-card">
      <view class="card-title">套餐信息</view>
      <view class="package-info">
        <text class="package-name">{{ order.packageName }}</text>
        <text class="package-desc">{{ order.packageDesc }}</text>
      </view>
    </view>

    <!-- 底部按钮 -->
    <view class="bottom-buttons">
      <block v-if="order.status === '待拍摄'">
        <button class="btn-secondary" @tap="cancelBooking">取消预约</button>
        <button class="btn-primary" @tap="contactPhotographer">联系摄影师</button>
      </block>
      <block v-if="order.status === '进行中'">
        <button class="btn-secondary" @tap="viewProgress">查看进度</button>
        <button class="btn-primary" @tap="contactPhotographer">联系摄影师</button>
      </block>
      <block v-if="order.status === '已完成'">
        <button class="btn-secondary" @tap="viewPhotos">查看照片</button>
        <button class="btn-primary" @tap="rateOrder">评价订单</button>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: '',
      order: {
        id: '',
        photographerName: '',
        photographerPhone: '',
        status: '',
        packageName: '',
        packageDesc: '',
        bookingTime: '',
        price: 0,
        avatar: ''
      }
    }
  },
  onLoad(options) {
    if (options.id) {
      this.id = options.id;
      this.getOrderDetail();
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    // 获取订单详情
    getOrderDetail() {
      // 这里应该从服务器获取订单详情
      // 模拟数据
      const mockOrders = [
        {
          id: '20231125001',
          photographerName: '小明摄影',
          photographerPhone: '13812345678',
          status: '待拍摄',
          packageName: '基础套餐',
          packageDesc: '30张精修照片，拍摄时间1小时',
          bookingTime: '2023-11-25 上午',
          price: 199,
          avatar: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde'
        },
        {
          id: '20231124002',
          photographerName: '小蓝摄影',
          photographerPhone: '13987654321',
          status: '进行中',
          packageName: '高级套餐',
          packageDesc: '50张精修照片，拍摄时间2小时',
          bookingTime: '2023-11-24 下午',
          price: 299,
          avatar: 'https://images.unsplash.com/photo-1570295999919-56ceb5ecca61'
        }
      ];
      
      const order = mockOrders.find(item => item.id === this.id);
      if (order) {
        this.order = order;
      } else {
        uni.showToast({
          title: '订单不存在',
          icon: 'none'
        });
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }
    },
    
    // 获取状态样式类
    getStatusClass(status) {
      switch(status) {
        case '待拍摄': return 'status-pending';
        case '进行中': return 'status-processing';
        case '已完成': return 'status-completed';
        default: return '';
      }
    },
    
    // 获取状态描述
    getStatusDesc(status) {
      switch(status) {
        case '待拍摄': return '您的预约已确认，请按时到达拍摄地点';
        case '进行中': return '摄影师正在为您拍摄和处理照片';
        case '已完成': return '拍摄已完成，您可以查看和下载照片';
        default: return '';
      }
    },
    
    // 取消预约
    cancelBooking() {
      uni.showModal({
        title: '取消预约',
        content: '确定要取消此次预约吗？取消可能会产生违约金。',
        confirmColor: '#FF4D4F',
        success: (res) => {
          if (res.confirm) {
            uni.showLoading({
              title: '取消中...'
            });
            
            // 模拟API调用
            setTimeout(() => {
              uni.hideLoading();
              uni.showToast({
                title: '预约已取消',
                icon: 'success'
              });
              
              // 返回上一页
              setTimeout(() => {
                uni.navigateBack();
              }, 1500);
            }, 1500);
          }
        }
      });
    },
    
    // 联系摄影师
    contactPhotographer() {
      uni.showActionSheet({
        itemList: ['拨打电话', '发送短信'],
        success: (res) => {
          if (res.tapIndex === 0) {
            // 拨打电话
            uni.makePhoneCall({
              phoneNumber: this.order.photographerPhone,
              fail: () => {
                uni.showToast({
                  title: '拨打电话失败',
                  icon: 'none'
                });
              }
            });
          } else if (res.tapIndex === 1) {
            // 发送短信
            uni.showToast({
              title: '短信功能开发中',
              icon: 'none'
            });
          }
        }
      });
    },
    
    // 查看进度
    viewProgress() {
      uni.navigateTo({
        url: `/pages/order-progress/order-progress?id=${this.id}`
      });
    },
    
    // 查看照片
    viewPhotos() {
      uni.showToast({
        title: '照片查看功能开发中',
        icon: 'none'
      });
    },
    
    // 评价订单
    rateOrder() {
      uni.showToast({
        title: '评价功能开发中',
        icon: 'none'
      });
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #F3F4F6;
  min-height: 100vh;
}

.nav-bar {
  display: flex;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.icon-back {
  font-size: 40rpx;
  margin-right: 20rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 500;
}

.status-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  text-align: center;
}

.status-header {
  margin-bottom: 20rpx;
}

.status-text {
  font-size: 36rpx;
  font-weight: bold;
}

.status-pending {
  color: #F59E0B;
}

.status-processing {
  color: #3B82F6;
}

.status-completed {
  color: #10B981;
}

.status-desc {
  font-size: 28rpx;
  color: #6B7280;
}

.info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.card-title {
  font-size: 30rpx;
  font-weight: 500;
  margin-bottom: 20rpx;
  color: #1F2937;
  border-bottom: 1rpx solid #E5E7EB;
  padding-bottom: 10rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 10rpx 0;
}

.info-label {
  color: #6B7280;
  font-size: 28rpx;
}

.info-value {
  color: #1F2937;
  font-size: 28rpx;
}

.price {
  color: #EF4444;
  font-weight: 500;
}

.photographer-info {
  display: flex;
  align-items: center;
}

.photographer-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  margin-right: 20rpx;
}

.photographer-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
  margin-bottom: 10rpx;
}

.photographer-contact {
  font-size: 26rpx;
  color: #6B7280;
}

.package-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #1F2937;
  margin-bottom: 10rpx;
}

.package-desc {
  font-size: 26rpx;
  color: #6B7280;
}

.bottom-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 40rpx;
  padding: 0 20rpx;
}

.btn-primary, .btn-secondary {
  width: 45%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 40rpx;
  font-size: 28rpx;
}

.btn-primary {
  background-color: #6366F1;
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  color: #6B7280;
  border: 1rpx solid #D1D5DB;
}
</style>